<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>用户编辑</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
	<link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
	<link rel="stylesheet" th:href="@{/css/common.css}">
	<link rel="stylesheet" th:href="@{/css/animate.min.css}">
	<link rel="stylesheet" th:href="@{/lib/layui/extend/formSelects-v4.css}"/>
</head>

<body>
<div class="z-body animated fadeIn">
	<form action="" method="post" class="layui-form layui-form-pane">
		<div class="layui-form-item">
			<label for="username" class="layui-form-label">
				用户名
			</label>
			<div class="layui-input-block">
				<input type="text" id="username" name="username" th:value="${user?.username}"
					   lay-verify="required" lay-vertype="tips"
					   autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label for="email" class="layui-form-label">
				邮箱
			</label>
			<div class="layui-input-block">
				<input type="text" id="email" name="email" th:value="${user?.email}"
					   lay-verify="required|email" lay-vertype="tips"
					   autocomplete="off" class="layui-input">
			</div>
		</div>
		<!-- 编辑时不显示密码框 -->
		<div th:if="${user == null}" class="layui-form-item">
			<label for="password" class="layui-form-label">
				用户密码
			</label>
			<div class="layui-input-block">
				<input type="password" id="password" name="password"
					   lay-verify="required" lay-vertype="tips"
					   autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" pane="">
			<label class="layui-form-label">
				状态
			</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="1" th:checked="${user?.status == 1 || user == null}"
					   title="正常">
				<input type="radio" name="status" value="0" th:checked="${user?.status == 0}" title="锁定">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">
				角色
			</label>
			<div class="layui-input-block">
				<select name="role" xm-select="role-select"
						lay-verify="required"
						lay-vertype="tips">
					<option value="">请选择角色</option>
					<option th:each="role:${roles}" th:value="${role.roleId}" th:text="${role.roleName}"
							th:selected="${#arrays.contains((roleIds == null ? #arrays.toIntegerArray(new Integer[]{}) : roleIds), role.roleId)}"></option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">
				部门
			</label>
			<div class="layui-input-block">
				<ul id="deptTree" class="dtree" data-id="0" data-value="请选择部门"></ul>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block" style="margin-left:0;text-align:center;">
				<input type="hidden" id="deptId" name="deptId" th:value="${user?.deptId}">
				<input type="hidden" id="userId" name="userId" th:value="${user?.userId}">
				<button th:text="${user}?'修改':'增加'" class="layui-btn layui-btn-normal btn-w100" lay-submit=""
						data-th-lay-filter="${user}?'edit':'add'"></button>
			</div>
		</div>
	</form>
</div>

<script th:src="@{/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:src="@{/js/common.js}"></script>

<script>
    layui.config({
        base: '/lib/layui/extend/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use(['form', 'layer', 'formSelects', 'dtree'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer
            , formSelects = layui.formSelects
            , dtree = layui.dtree;

        dtree.renderSelect({
            elem: "#deptTree",
            url: "/dept/tree",
            success: function (data, obj, first) {
                console.log(data);
                console.log(obj);
                console.log(first);
            },
            dataStyle: "layuiStyle",
            width: "100%",
            method: "GET",
            dot: false,
            menubar: true,
            response: {
                statusName: "status",
                statusCode: 0,
                message: "message",
                rootName: "data",
                treeId: "deptId",
                parentId: "parentId",
                title: "deptName",
                childName: "children"
            }
        });
        dtree.on("node('deptTree')", function (obj) {
            var typeDom = layui.$('#deptId');
            console.log(typeDom.val(), obj.param.nodeId);
            console.log(typeDom.val() === obj.param.nodeId);
            if (typeDom.val() === obj.param.nodeId) {
                typeDom.val('');
                layui.$("input[dtree-id='deptTree']").val('请选择');
            } else {
                typeDom.val(obj.param.nodeId)
            }
        });

        form.on('submit(add)', function (form) {
            form.field.role = formSelects.value('role-select', 'val');
            console.log(form.field.role);
            $.post('/user', form.field, function (result) {
                handlerResult(result, addDone);
            });
            return false;
        });

        //监听提交
        form.on('submit(edit)', function (form) {
            form.field._method = 'PUT';
            form.field.role = formSelects.value('role-select', 'val');
            $.post('/user', form.field, function (result) {
                handlerResult(result, editDone);
            });
            return false;
        });

        function addDone(data) {
            console.log(data);
            layer.msg("添加成功", {icon: 6});
        }

        function editDone(data) {
            layer.msg("修改成功", {icon: 6});
        }
    });
</script>
</body>

</html>